<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    @include('common-css')
    <style>

        .input_box {
            width: 100%;
            height: 40px;
            margin-top: 15px;
            margin-bottom: 15px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .input_label {
            width: 120px;
            box-sizing: border-box;
        }

        .project-table {
            margin-top: 15px;
        }

        .status-tag {
            color: #1890ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            background: #e6f7ff;
            font-size: 12px;
            padding: 2px 3px;
        }

        .ant-table-tbody > tr > td, .ant-table-thead > tr > th {
            vertical-align: middle;
            line-height: 25px;
        }

        .search_box {
            width: 1000px;
        }

        .search_box input {
            width: 300px;
        }

        .search_box button {
            margin-left: 20px;
        }

        .search_box .ant-select {
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div id="app"></div>

<script id="appTemplate" type="x-template">
    <a-locale-provider :locale="antdLocale">
        <div class="container">

            @include('committee.header-tpl')

            <main>
                <div class="common_container">

                    @include('committee.aside-tpl')

                    <div class="common_content admin_common_content">
                        <div style="margin-top: 20px; margin-bottom: 20px">
                            <span style="font-weight: bold">待定区范围：</span>
                            <a-input-number :disabled="notAtPhaseSetUndeterminedInterval" size="small"
                                            :min="0" :max="maxAwardRate" :precision="2"
                                            v-model="undeterminedIntervalBegin"/>
                            <span>% ~ </span>
                            <a-input-number :disabled="notAtPhaseSetUndeterminedInterval" size="small"
                                            :min="undeterminedIntervalBegin" :max="maxAwardRate" :precision="2"
                                            v-model="undeterminedIntervalEnd"/>
                            <span>%</span>
                            <a-button :disabled="notAtPhaseSetUndeterminedInterval" style="margin-left: 40px;"
                                      type="primary"
                                      @click="handleSetUndeterminedInterval">
                                设置待定区
                            </a-button>
                        </div>
                        <p v-if="hasPhaseSetUndeterminedIntervalBegun" style="margin-top: 20px; margin-bottom: 20px">
                            <template v-for="count,i in rankingIntervalStats">
                                <span >@{{ rankingIntervalNames[i] }} @{{ count }} 个</span>
                                <span v-if="i < rankingIntervalStats.length - 1">；</span>
                            </template>
                        </p>
                        <div style="margin-top: 20px; margin-bottom: 20px">
                            <template v-if="atPhaseSetUndeterminedInterval">
                                <a-popconfirm title="同步后不能撤销，确认同步？"
                                              okText="是"
                                              cancelText="否"
                                              @confirm="submitSetUndeterminedIntervalResult">
                                    <a-button type="primary">同步待定区成果至奖励委委员</a-button>
                                </a-popconfirm>
                            </template>
                            <a-button v-else :disabled="true" type="primary">
                                同步待定区成果至奖励委委员
                            </a-button>

                        </div>

                        <a-table class="project-table"
                                 rowKey="id"
                                 size="small"
                                 :columns="projectTableColumns"
                                 :dataSource="filteredProjects"
                                 :loading="loadingPageData"
                                 :pagination="{pageSize: 10000, hideOnSinglePage: true, position: 'both', showTotal: total => `共 ${total} 项`}">
                            <span slot="application_form" size="large" slot-scope="text, record">
                                <a :href="'/home/view-form?id=' + record.id" target="_blank">查看</a>
                            </span>
                            <span slot="attachments" slot-scope="text, record">
                                <a :href="'/home/view-attachments?project_id=' + record.id" target="_blank">
                                    <span>查看</span>
                                </a>
                            </span>
                            <span slot="ranking_percent" slot-scope="text, record">
                                @{{ record.ranking_percent }}%
                            </span>
                            <span slot="ranking_interval" slot-scope="text, record">
                                <span :style="rankingIntervalStyles[record.ranking_interval]">@{{ rankingIntervalNames[record.ranking_interval] }}</span>
                            </span>
                        </a-table>
                    </div>

                </div>
            </main>

        </div>
    </a-locale-provider>
</script>

@include('common-js')
@include('committee.header-js')
@include('committee.aside-js')

<script>
    var queryParams = parseUrl(location.href).params;
    var awardsInfo = {!! json_encode(array_values(config('vars.awards')), JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};

    var projectTableColumns = [
        {
            width: 60,
            title: '序号',
            dataIndex: 'num'
        },
        {
            width: 150,
            title: '项目名称',
            dataIndex: 'project_name',
        },
        {
            width: 150,
            title: '申报者',
            dataIndex: 'applicant',
        },
        {
            width: 70,
            title: '申报书',
            dataIndex: 'application_form',
            scopedSlots: {
                customRender: 'application_form'
            }
        },
        {
            width: 70,
            title: '附件',
            dataIndex: 'attachments',
            scopedSlots: {
                customRender: 'attachments'
            }
        },
        {
            width: 60,
            title: '平均分',
            dataIndex: 'avg_score',
        },
        {
            width: 60,
            title: '排名',
            dataIndex: 'ranking_percent',
            scopedSlots: {
                customRender: 'ranking_percent'
            }
        },
        {
            width: 70,
            title: '授奖等级',
            dataIndex: 'planned_award_level',
        },
        {
            width: 100,
            title: '排名区间',
            dataIndex: 'ranking_interval',
            scopedSlots: {
                customRender: 'ranking_interval'
            }
        },
    ];
</script>

<script>
    var app = new Vue({
        el: '#app',
        template: '#appTemplate',
        data: {
            profCategoryFilter: '',
            searchKeyword: '',

            projectTableColumns,
            pageData: [],
            loadingPageData: false,

            atPhaseSetUndeterminedInterval: false,
            hasPhaseSetUndeterminedIntervalBegun: false,
            hasPhaseSetUndeterminedIntervalEnded: false,
            maxAwardRate: 50,
            undeterminedIntervalBegin: 40,
            undeterminedIntervalEnd: 50,

            RANKING_INTERVAL_1: 0,  // 排名领先待定区
            RANKING_INTERVAL_2: 1,  // 排名落在待定区
            RANKING_INTERVAL_3: 2,  // 排名落在待定区

            rankingIntervalNames: ['待定区前，确定入围', '待定区内，需要投票', '待定区后，不予授奖'],
            rankingIntervalStyles: ["color: green;", "color: orange;", "color: red;"],
            rankingIntervalStats: [0, 0, 0],

            queryParams,
            awardsInfo,
            profCategories,

            asideSelectedKeys: queryParams.aside_key ? [queryParams.aside_key] : [],
            antdLocale: antd.locales.zh_CN,
            ...CommitteeHeader.data,
            ...CommitteeAside.data,
        },
        computed: {
            notAtPhaseSetUndeterminedInterval() {
                return !this.atPhaseSetUndeterminedInterval
            },
            filteredProjects() {
                var projects = this.searchFilteredProjects;
                if (this.profCategoryFilter) {
                    projects = projects.filter(project => {
                        return project.prof_category == this.profCategoryFilter
                    })
                }
                var num = 1;
                projects.forEach(project => {
                    project.num = num++
                });
                return projects
            },
            searchFilteredProjects() {
                var projects;
                if (this.searchKeyword) {
                    var q = this.searchKeyword.trim();
                    projects = this.pageData.filter(project => {
                        var text = project.project_name + project.applicant_name + project.applicant_org_name + project.applicant_tel + project.applicant_email;
                        return text.toLowerCase().indexOf(q) != -1
                    })
                } else {
                    projects = this.pageData
                }
                return projects
            },
        },
        mounted() {
            this.reloadPageData()
        },
        methods: {
            handleSetUndeterminedInterval() {
                axios.post('/api/committee/set-undetermined-interval', {
                    undeterminedIntervalBegin: this.undeterminedIntervalBegin,
                    undeterminedIntervalEnd: this.undeterminedIntervalEnd,
                }).then(response => {
                    if (response.data.ok) {
                        success('设置待定区成功');
                        this.calcProjectRankingInterval()
                    } else {
                        error('设置待定区失败：' + response.data.msg)
                    }
                })
            },
            submitSetUndeterminedIntervalResult() {
                axios.post('/api/committee/submit-set-undetermined-interval-result').then(response => {
                    if (response.data.ok) {
                        success('同步待定区成果成功');
                        this.reloadPageData()
                    } else {
                        error('同步待定区成果失败: ' + response.data.msg)
                    }
                })
            },
            calcProjectRankingInterval() {
                let rankingIntervalStats = [0, 0, 0];
                for (let project of this.pageData) {
                    let ranking_percent = project.ranking_percent;
                    let ranking_interval = ranking_percent < this.undeterminedIntervalBegin ? this.RANKING_INTERVAL_1 :
                        (ranking_percent <= this.undeterminedIntervalEnd ? this.RANKING_INTERVAL_2 : this.RANKING_INTERVAL_3);
                    Vue.set(project, 'ranking_interval', ranking_interval);
                    rankingIntervalStats[ranking_interval]++
                }
                this.rankingIntervalStats = rankingIntervalStats
            },
            reloadPageData() {
                this.loadingPageData = true;
                axios.get('/api/committee/get-manage-large-group-2-data').then(response => {
                    if (response.data.ok) {
                        let data = response.data;
                        this.atPhaseSetUndeterminedInterval = data.atPhaseSetUndeterminedInterval;
                        this.hasPhaseSetUndeterminedIntervalBegun = data.hasPhaseSetUndeterminedIntervalBegun;
                        this.hasPhaseSetUndeterminedIntervalEnded = data.hasPhaseSetUndeterminedIntervalEnded;
                        this.maxAwardRate = data.maxAwardRate;
                        this.undeterminedIntervalBegin = data.undeterminedIntervalBegin;
                        this.undeterminedIntervalEnd = data.undeterminedIntervalEnd;
                        this.pageData = data.projects;
                        this.calcProjectRankingInterval()
                    } else {
                        error('加载页面数据失败: ' + response.data.msg)
                    }
                    this.loadingPageData = false
                })
            },
            ...CommitteeHeader.methods,
            ...CommitteeAside.methods,
        }
    })
</script>

</body>
</html>